<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>仿微博评论</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/jsp/topic/css/style.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/jsp/topic/css/comment.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/topic/js/jquery-1.12.0.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/topic/js/jquery.flexText.js"></script>
</head>
<body>
	<!--
    此评论textarea文本框部分使用的https://github.com/alexdunphy/flexText此插件
-->
	<script type="text/javascript">
    var currentUser;
    var realname;
	$.ajax({
		   type:"get",
		   url:"/BookStoreManager/getUser",
		   success:function(data){
			  currentUser = data.username;
			  realname = data.realname;
		   }
			    });
	
	
   $.ajax({
	   type:"get",
	   url:"/BookStoreManager/initTopic",
	   success:function(data){
		  initTopic(data);
	   }
		    });
		
   function initTopic(data){
	   for(var i=0;i<data.length;i++){
			  var  oneTopic = data[i];
			  var  oneTopicDetailsList = data[i].details;
			  var Topictime = formatTime(new Date(oneTopic.time));
			  var topicNode =  "<div class='comment-show' id="+oneTopic.id+"><div class='comment-show-con clearfix'><div class='comment-show-con-img pull-left'><img src='${pageContext.request.contextPath}/jsp/topic/images/header-img-comment_03.png' alt=''></div><div class='comment-show-con-list pull-left clearfix'><div class='pl-text clearfix'><a href='#' id="+oneTopic.username+" class='comment-size-name' style='font-size:15px' >"+oneTopic.realname+" </a><span class='my-pl-con' style='font-size:15px'>&nbsp;"+oneTopic.topicTitle+"</span></div><div class='date-dz'><span class='date-dz-left pull-left comment-time'>"+Topictime+"</span><div class='date-dz-right pull-right comment-pl-block'><a href='javascript:;' class='date-dz-pl pl-hf hf-con-block pull-left'>回复</a></div></div><div class='hf-list-con'></div></div></div></div>";
			  $(".commentAll").append(topicNode);
			  var temp = "#"+oneTopic.id;
			  for(var j=0;j<oneTopicDetailsList.length;j++){
				  var oneTopicDetails = oneTopicDetailsList[j]; 
				  var oThis = $(temp);
				  //获取回复人的名字
			        var fhName = oneTopicDetails.realuser;
				  var time = new Date(oneTopicDetails.time);
				  var newTime = formatTime(time);
			        //回复@
			        var fhN = '回复@'+oneTopicDetails.realtoname;
			        //var oInput = oThis.parents('.date-dz-right').parents('.date-dz').siblings('.hf-con');
			        var oHtml = '<div class="all-pl-con"><div class="pl-text hfpl-text clearfix"><a href="#" id='+oneTopic.username+' class="comment-size-name">'+fhName+': </a><span class="my-pl-con">'+fhN+'</span></div><div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+oneTopicDetails.content+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+newTime+'&nbsp;</span><div class="date-dz-right pull-right comment-pl-block">  <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>  </div>';
	                oThis.find(".comment-show-con-list").find('.hf-list-con').css('display','block').prepend(oHtml);
	                
			  }
			 
		        }
   }
   
   function getMeTopic(){
		
	   $.ajax({
		   type:"get",
		   url:"/BookStoreManager/getMeTopic",
		   success:function(data){
			   $(".comment-show").remove();
			   initTopic(data);
		   }
			    });
   }
   
   function getCallMeTopic(){
	   $.ajax({
		   type:"get",
		   url:"/BookStoreManager/getCallMeTopic",
		   success:function(data){
			   $(".comment-show").remove();
			   initTopic(data);
		   }
			    });
   }
   
   //日期格式化
   function formatTime(time){
	   var year = time.getFullYear();
	   var month = time.getMonth()+1;
	   var day = time.getDate();
	   var hours = time.getHours();
	   var minute = time.getMinutes();
	   var second = time.getSeconds();
	   return year+"-"+month+"-"+day+"  "+hours+":"+minute+":"+second;
   }

</script>
    <div>
      <a style="float: right;font-size: 15px;color: red;" href="#" onclick="getMeTopic()" >我发布的话题&nbsp;&nbsp;&nbsp;</a>
      <a style="float: right;font-size: 15px;color: red;" href="#" onclick="getCallMeTopic()">@我&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
    </div>
	<div class="commentAll" style="width: 800px;">
		<!--评论区域 begin-->
		<div class="reviewArea clearfix">
			<textarea class="content comment-input"
				placeholder="请输入话题" onkeyup="keyUP(this)"></textarea>
			<a href="javascript:;" class="plBtn">发布话题</a>
		</div>
		<!--评论区域 end-->
		<!-- <!--回复区域 begin-->
		<!--回复区域 end-->
	</div>



	
	<!--textarea高度自适应-->
	<script type="text/javascript">
    $(function () {
        $('.content').flexText();
    });
</script>
	<!--textarea限制字数-->
	<script type="text/javascript">
    function keyUP(t){
        var len = $(t).val().length;
        if(len > 139){
            $(t).val($(t).val().substring(0,140));
        }
    }
</script>
	<!--点击评论创建评论条-->
	<script type="text/javascript">
    $('.commentAll').on('click','.plBtn',function(){
        var myDate = new Date();
        //获取当前年
        var year=myDate.getFullYear();
        //获取当前月
        var month=myDate.getMonth()+1;
        //获取当前日
        var date=myDate.getDate();
        var h=myDate.getHours();       //获取当前小时数(0-23)
        var m=myDate.getMinutes();     //获取当前分钟数(0-59)
        if(m<10) m = '0' + m;
        var s=myDate.getSeconds();
        if(s<10) s = '0' + s;
        var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
        //获取输入内容
        var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val();
        console.log(oSize);
        var temp = this;
        $.ajax({
        	data:{"topicTitle":oSize},
        	url:"/BookStoreManager/addTopic",
        	type:"post",
        	success:function(data){
        		if(data!="添加失败"){
        			 //动态创建评论模块
        	        oHtml = '<div class="comment-show" id='+data+'><div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src="${pageContext.request.contextPath}/jsp/topic/images/header-img-comment_03.png" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" id='+currentUser+' class="comment-size-name">'+realname+' : </a> <span class="my-pl-con">&nbsp;'+ oSize +'</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"><a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>  </div> </div><div class="hf-list-con"></div></div> </div></div>';
        	        if(oSize.replace(/(^\s*)|(\s*$)/g, "") != ''){
        	            $(temp).parents('.reviewArea').after(oHtml);
        	            $(temp).siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text('');
        	        }
        		}
        		else{
        			alert("添加失败");
        		} 
        	}
        })
       
    });
</script>
	<!--点击回复动态创建回复块-->
	<script type="text/javascript">
    $('.commentAll').on('click','.pl-hf',function(){
        //获取回复人的名字
        var fhName = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        //回复@
        var fhN = '回复@'+fhName;
        //var oInput = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.hf-con');
        var fhHtml = '<div class="hf-con pull-left"> <textarea class="content comment-input hf-input" placeholder="" onkeyup="keyUP(this)"></textarea> <a href="javascript:;" class="hf-pl">评论</a></div>';
        //显示回复
        if($(this).is('.hf-con-block')){
            $(this).parents('.date-dz-right').parents('.date-dz').append(fhHtml);
            $(this).removeClass('hf-con-block');
            $('.content').flexText();
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('padding','6px 15px');
            //console.log($(this).parents('.date-dz-right').siblings('.hf-con').find('.pre'))
            //input框自动聚焦
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.hf-input').val('').focus().val();
        }else {
            $(this).addClass('hf-con-block');
            $(this).parents('.date-dz-right').siblings('.hf-con').remove();
        }
    });
</script>
	<!--评论回复块创建-->
	<script type="text/javascript">
    $('.commentAll').on('click','.hf-pl',function(){
        var oThis = $(this);
        var topicId = $(this).parents('.comment-show').attr('id');
        var myDate = new Date();
        //获取当前年
        var year=myDate.getFullYear();
        //获取当前月
        var month=myDate.getMonth()+1;
        //获取当前日
        var date=myDate.getDate();
        var h=myDate.getHours();       //获取当前小时数(0-23)
        var m=myDate.getMinutes();     //获取当前分钟数(0-59)
        if(m<10) m = '0' + m;
        var s=myDate.getSeconds();
        if(s<10) s = '0' + s;
        var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
        //获取输入内容
        var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val();
        console.log(oHfVal)
        var oHfName = $(this).parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        var oAllVal = '回复@'+oHfName;
        var user = $(this).parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').attr('id');
        $.ajax({
        	type:"post",
        	url:"/BookStoreManager/replyTopic",
        	data:{"toname":user,"content":oHfVal,"topicId":topicId},
        	success:function(data){
        			  var oHtml = '<div class="all-pl-con"><div class="pl-text hfpl-text clearfix"><a id='+currentUser+' href="#" class="comment-size-name">'+realname+': </a><span class="my-pl-con">'+oAllVal+'</span></div><div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+oHfVal+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+now+'&nbsp;</span><div class="date-dz-right pull-right comment-pl-block">  <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>  </div>';
        		        oThis.parents('.hf-con').parents('.comment-show-con-list').find('.hf-list-con').css('display','block').prepend(oHtml) && oThis.parents('.hf-con').siblings('.date-dz-right').find('.pl-hf').addClass('hf-con-block') && oThis.parents('.hf-con').remove();
        		
        	}
        })
        
      
        
    });
</script>
	<!--删除评论块-->
	<script type="text/javascript">
    $('.commentAll').on('click','.removeBlock',function(){
        var oT = $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con');
        if(oT.siblings('.all-pl-con').length >= 1){
            oT.remove();
        }else {
            $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con').parents('.hf-list-con').css('display','none')
            oT.remove();
        }
        $(this).parents('.date-dz-right').parents('.date-dz').parents('.comment-show-con-list').parents('.comment-show-con').remove();

    })
</script>
	<!--点赞-->
	<script type="text/javascript">
    $('.comment-show').on('click','.date-dz-z',function(){
        var zNum = $(this).find('.z-num').html();
        if($(this).is('.date-dz-z-click')){
            zNum--;
            $(this).removeClass('date-dz-z-click red');
            $(this).find('.z-num').html(zNum);
            $(this).find('.date-dz-z-click-red').removeClass('red');
        }else {
            zNum++;
            $(this).addClass('date-dz-z-click');
            $(this).find('.z-num').html(zNum);
            $(this).find('.date-dz-z-click-red').addClass('red');
        }
    })
</script>
</body>
</html>